<template>
    <!--  外框架-->
    <div class="framework1">
        <!--      内框架-->

        <!--   文书查看界面   -->
        <div class="frameworkIn1" v-if="clickTemplate">
            <div class="templateHeader">
                <span style="padding-bottom: 4px;">文书{{ templateData.isEdit }}->{{ templateData.documentName }}</span>
                <span style="float: right;padding-bottom: 6px;">
                    <el-button type="danger" icon="Close" size="small" @click="closeTemplate()">
                    </el-button>
                </span>
            </div>
            <iframe style="width:100%;height:calc(100% - 76px);border:none;" ref="iframe"
                :src="'./' + 202307180112"></iframe>
            <div class="templateFooter">
                <el-button @click="$refs.iframe.contentWindow.postForm();">提交
                </el-button>
            </div>
        </div>

        <div class="framework2" v-show="!clickTemplate">
            <!--        卷宗管理表格-->
            <div class="top-class-table">
                <div class="header">
                    <span>部门内审-></span>
                    <span>卷宗管理</span>
                </div>
                <!--          新增刷新-->
                <div class="button_group">
                    <el-button type="primary" icon="DocumentAdd" style="margin-left: 10px;" @click="addDossierItem()"
                        v-if="permissionIsShow.add">新增卷宗
                    </el-button>
                    <!-- 单位选择 -->
                    <el-select v-if="loginUserInfo.responsibleScope === '5' || loginUserInfo.responsibleScope === '4'"
                        v-model="searchUnitId" placeholder="请选择所属部门" style="width: 250px;margin-left: 15px"
                        @change="reqDossierData" clearable>
                        <el-option v-for="item in unitData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <el-input v-model="search" placeholder="请输入卷宗编号" style="width: 250px;margin-left: 15px"
                        clearable></el-input>
                    <el-button type="primary" icon="Search" @click="reqDossierData()">搜索</el-button>
                </div>
                <!--           数据表-->
                <div style="height: calc(100vh - 134px)">
                    <el-table :data="dossierData" :row-style="{ height: '47px' }"
                        style="width: 100%;height:calc(100% - 68px)" :header-cell-style="{ background: '#f4f3f9' }">
                        <el-table-column prop="unitName" label="所属部门" width="300" />
                        <el-table-column prop="dossierNo" label="卷宗编号" width="220" />
                        <el-table-column prop="dossierName" label="卷宗类型" width="350" />
                        <el-table-column prop="createTime" label="创建时间" width="auto" />
                        <el-table-column align="center" fixed="right" prop="operate" label="操作" width="300"
                            v-if="permissionIsShow.check || permissionIsShow.edit || permissionIsShow.delete">
                            <template v-slot="scope">
                                <el-button type="primary" size="small" icon="Edit" @click="clickAddDocument(scope.row)"
                                    v-if="permissionIsShow.check">
                                    检查案卷
                                </el-button>
                                <el-button type="primary" size="small" icon="Edit" @click="editDossierItem(scope.row)"
                                    v-if="permissionIsShow.edit">编辑
                                </el-button>
                                <el-button type="danger" size="small" icon="Delete" @click="deleteDossier(scope.row.id)"
                                    v-if="permissionIsShow.delete">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--    分页-->
                    <div class="footer">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :page-sizes="[5, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>

        </div>
        <!--  新增案卷弹窗-->
        <el-dialog v-model="addDossier" :close-on-click-modal="false" title="卷宗操作" width="450px" @close="cancel()">
            <!--卷宗编辑表单-->
            <el-form :model="addForm" :close-on-click-modal="false" :rules="rules" ref="addForm">
                <el-form-item label="所属部门" prop="unitId" v-if="this.loginUserInfo.unitId === 1">
                    <el-select v-model="addForm.unitId" placeholder="请选择所属部门" style="width: 100%;">
                        <el-option v-for="item in unitData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="卷宗编号" prop="dossierNo">
                    <el-input v-model="addForm.dossierNo" placeholder="请输入卷宗编号" />
                </el-form-item>
                <el-form-item label="卷宗类型" prop="dossierName">
                    <el-select v-model="addForm.dossierName" placeholder="请选择卷宗类型" style="width: 100%;">
                        <el-option label="行政检查案卷" value="行政检查案卷" />
                        <el-option label="行政强制案卷" value="行政强制案卷" />
                        <el-option label="行政处罚案卷" value="行政处罚案卷" />
                    </el-select>
                </el-form-item>

                <!--        确定取消按钮-->
                <div style="display: flex;justify-content: flex-end">
                    <el-form-item>
                        <el-button type="primary" @click="add('addForm')">确定</el-button>
                        <el-button @click="cancel('addForm')">取消</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import request from "@/utils/request";

export default {
    name: "Dossier",
    data() {
        return {
            search: '',
            //表格数据
            dossierData: [],
            unitData: [],
            searchUnitId: '',

            //表格分页
            currentPage: 1, //页码
            pageSize: 10, //页长
            total: 0,  //总表长
            rowId: 0,  //行id传值
            //弹窗
            addDossier: false,
            dialogVisible: false,
            ruleForm: [],

            //文书渲染
            clickTemplate: false,

            //文书数据
            templateData: {
                documentName: "行政检查资料案卷",
                pstageId: "",
                documentType: "",
                templateNo: "",
                viewTemplateNo: "",
            },//templateData

            addForm: {},
            // 表单验证
            rules: {
                unitId: [
                    { required: true, message: '请选择所属部门', trigger: 'blur' },
                ],
                dossierNo: [
                    { required: true, message: '请输入卷宗编号', trigger: 'blur' },
                ],
                dossierName: [
                    { required: true, message: '请输入卷宗名称', trigger: 'blur' },
                ],
            },
            // 登录用户信息
            loginUserInfo: {
                id: '',
                responsibleScope: '', //查询范围
                roleLevel: '', //角色等级
                unitId: '', //内设部门ID
                userRole: '', //角色ID
                permissions: [], // 按钮路径（数据库中的path）
            },
            // 按钮权限
            permissionIsShow: {
                add: false,
                edit: false,
                delete: false,
                check: false,
            }
        };
    },//data

    created() {
        const info = JSON.parse(localStorage.getItem("user"));
        this.loginUserInfo = {
            id: Number(info.id),
            responsibleScope: info.responsibleScope, // 查询范围
            roleLevel: Number(info.roleLevel),
            unitId: Number(info.unitId),
            userRole: Number(info.userRole),
            permissions: info.permissions.filter(item => Number(item.menuId) === 12).map(item => item.path),
        }
        this.permissionIsShow = {
            add: this.loginUserInfo.permissions.includes('dossier-add'),
            edit: this.loginUserInfo.permissions.includes('dossier-edit'),
            delete: this.loginUserInfo.permissions.includes('dossier-delete'),
            check: this.loginUserInfo.permissions.includes('dossier-check'),
        }
        this.reqDossierData();
        this.getUnitId();
    },

    methods: {
        // 获取单位
        getUnitId() {
            if (this.loginUserInfo.unitId !== 1) {
                return
            } else {
                const responsibleScope = this.loginUserInfo.responsibleScope
                if (responsibleScope === '5') {
                    // 所有部门
                    request.get("/unit/filterAfterAllUnit").then(res => {
                        if (res.code === "200") {
                            this.unitData = res.data;
                        }
                    })
                } else if (responsibleScope === '4') {
                    // 部分部门
                    request.get("/unit/filterAfterAllUnit", {
                        params: {
                            userId: this.loginUserInfo.id,
                        }
                    }).then(res => {
                        if (res.code === "200") {
                            this.unitData = res.data;
                        }
                    })
                } else {
                    this.unitData = []
                }
            }
        },

        //连表删除(主从表，非逻辑)
        deleteDossier(val) {
            this.$confirm('是否确定删除卷宗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose: false,
                type: 'warning'
            }).then(() => {
                request.get("/dossier/delete/" + val).then(res => {
                    if (res.data.toString() == "true") {
                        //删除完后刷新
                        this.reqDossierData();
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    } else if (res.data.toString() == "false")
                        this.$message({
                            type: "warning",
                            message: "操作错误"
                        })
                })
            }).catch(() => {

            });
        },

        add(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    request.post("/dossier/edit", this.addForm).then(res => {
                        if (res.code === "200") {
                            this.reqDossierData();
                            this.$refs.addForm.resetFields();
                            this.addForm = {};
                            this.$message({
                                type: "success",
                                message: "操作成功"
                            })
                            this.addDossier = false;
                        } else if (res.code === "500") {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 新增
        addDossierItem() {
            this.addDossier = true;
            if (this.loginUserInfo.unitId !== 1) {
                this.addForm.unitId = this.loginUserInfo.unitId;
            }
        },
        //编辑
        editDossierItem(val) {
            this.addForm = { ...val };
            this.addDossier = true;
        },

        //点击取消后的操作
        cancel(formName) {
            this.$refs.addForm.resetFields();
            this.addDossier = false;
            this.addForm = {};
        },

        reqDossierData() {
            const responsibleScope = this.loginUserInfo.responsibleScope
            if (responsibleScope === '5') {
                // 所有部门的所有卷宗
                request.get(`/dossier/page`, {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search,
                        unitId: this.searchUnitId,
                    }
                }).then(res => {
                    if (res.code === '200') {
                        this.dossierData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            } else if (responsibleScope === '4') {
                // 查负责部门的卷宗
                request.get(`/dossier/page`, {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search,
                        userId: this.loginUserInfo.id,
                        unitId: this.searchUnitId,
                    }
                }).then(res => {
                    if (res.code === '200') {
                        this.dossierData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            } else {
                // 查自己部门的卷宗
                request.get(`/dossier/page`, {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search,
                        unitId: this.loginUserInfo.unitId,
                    }
                }).then(res => {
                    if (res.code === '200') {
                        this.dossierData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            }

        },

        //增加文书或编辑文书或查看文书
        clickAddDocument: function (val) {
            window.getTemplateData = (callback) => {
                this.getTemplateData(val, callback);
            }
            window.postTemplateDate = (data) => {
                this.postTemplateDate(val, data);
            }
            window.changeTemplateDow = () => {
                this.changeTemplateDow();
            }
            this.clickTemplate = true;
        }, //增加或编辑或查看文书按钮

        getTemplateData: function (val, callback) {
            if (val.dossierParams) {
                callback(JSON.parse(val.dossierParams));
            } else {
                return;
            }
        }, //获取文书数据

        postTemplateDate: function (val, data) {
            val.dossierParams = JSON.stringify(data);
            this.$confirm('是否确定提交文书?', '提示', {
                showClose: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.post("/dossier/edit", val)
                    .then(res => {
                        if (res.code != '200') {
                            return;
                        }
                        if (res.data.toString() == 'true') {
                            this.$message.success('提交成功');
                        } else {
                            this.$message.error('提交失败');
                        }
                        this.closeTemplate();
                    })
            })
                .catch(() => {
                });
        }, //修改文书数据

        closeTemplate: function () {
            // this.changeCom1();
            this.clickTemplate = false;
            document.title = "卷宗管理";
        }, //关闭文书渲染页面

        changeTemplateDow: function () {
            if (!this.isPass) {
                this.$refs.iframe.contentDocument.getElementsByClassName("el-button").item(0).style.display = "none";
            }
        },//修改文书页面样式

        //表尾分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.reqDossierData();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.reqDossierData();
        },

    }//methods
}//default


</script>


<style scoped>
#roleSpan {
    color: black;
    text-decoration: none;
}


/*   外框架   */
.framework1 {
    height: calc(100vh - 88px);
    width: calc(100vh - 200px);
    margin-left: 8px;
    border: solid 1px #D3D3D3;
}

/*   文书内框架   */
.frameworkIn1 {
    height: calc(100vh - 92px);
    width: 100%;
    border: solid 1px #D3D3D3;
}

/*   内框架   */
.framework2 {
    height: calc(100vh - 92px);
    border: solid 1px #D3D3D3;
}

/*   文书标题   */
.templateHeader {
    font-size: 19px;
    font-weight: bold;
    padding: 4px 20px;
    height: 30px;
    border: 1px solid #CCCCCC;
    background-color: #E0ECFF;
}

/*   文书底边   */
.templateFooter {
    text-align: center;
    margin-top: -4px;
    padding: 4px 20px;
    height: 30px;
    border: 1px solid #CCCCCC;
    background-color: #E0ECFF;
}

/*   表格大标题   */
.header {
    font-size: 16px;
    font-weight: bold;
    padding: 4px 20px;
    height: 22px;
    background-color: #CCCCCC;
}

/*   表格按键组   */
.button_group {
    padding: 4px 10px;
    background-color: #DDDDDD;
}

/*   表格分页处   */
.footer {
    padding: 4px 10px;
    background-color: #f4f3f9;
}
</style>
